<template>
	<view>
		
		<view class="u-w-750 u-h-380 u-p-l-20 u-p-t-20 upgrade">
			<view class="u-flex u-row-between">
				<view class="avator-box">
					<view class="u-rela u-w-150 u-flex-col u-row-center u-col-center">
						<view class="avator-box-face">
							<u--image :src="userinfo.user_headimg" width="70px" height="70px" shape="circle" mode="widthFix" radius="50%"></u--image>
						    <view class="bl90_48" v-if="userinfo['rsums']>=5 && userinfo['orderCount']>0">VIP</view>
							<view class="bl90_48" v-else>用户</view>
						</view>
						
					</view>
					<view class=" cl_FFF u-font-26">
						<view class="u-font-35">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-25">
			<view class="h320r padding-top-20 upgradebg" style="margin-top: -75px;">
				<view class="now h54r w136r -margin-left-12 fs-24 color-fff flex justify-center align-center padding-bottom-10">
					当前身份</view>
				<view class="padding-left-40">
					<view class="fw-bold fs-36" v-if="userinfo['rsums']>=5 && userinfo['orderCount']>0">会员</view>
					<view class="fw-bold fs-36" v-else>用户</view>
					<view class="color-7A4A1E  fs-26 ">
					</view>
					<view class="margin-top-20 w455r">
						<u-line-progress :percentage="0" height="14" inactiveColor="#925316"></u-line-progress>
					</view>
					<view class="w455r flex justify-between align-center fs-26">
						<view class="color-7A4A1E">用户</view>
						<view class="color-666">会员</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-25 padding-x-30">
			<view class="flex align-center">
				<view class="line">
				</view>
				<view class="fs-28 fw-bold margin-left-20">
					会员升级途径</view>
			</view>
			<view>
				<view class="flex justify-between align-center margin-top-30">
					
					<view class="w455r ">
       <u-line-progress :percentage="rsums" height="20" activeColor="#925316"></u-line-progress>
						<view class="color-8D561E fs-24 margin-top-10">
							{{userinfo['rsums']}}/5个用户
						</view>
					</view>
					<view class="color-8D561E share " @tap="toshare()">
						去分享
					</view>
				</view>
				<view class="flex justify-between align-center margin-top-30">
					<view class="w455r ">
						<u-line-progress :percentage="orderCount" height="20" activeColor="#925316"></u-line-progress>
						<view class="color-8D561E fs-24 margin-top-10">
							当月消费{{userinfo['orderCount']}}/9笔订单
						</view>
					</view>
					<view class="color-8D561E share" @tap="tohome()">
						去消费
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-25">
			<u-alert :title="title" type="error" fontSize="24" effect="light" :description = "description"></u-alert>
		</view>
		<view class="yui-share">
			<view class="share share-button">
				申请区域合伙人
			</view>
		</view>
		<view class="u-select">
			<!---->
		</view>
		<!---->
		<view class="u-toast u-type-undefined u-position-undefined"style="z-index: 999999;">
			<view class="u-icon-wrap">
			</view>
			<uni-text class="u-text">
				<span></span>
			</uni-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: "已结算"
				}, {
					name: "未结算"
				}],
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				accoutList: '',
				rsums:0,
				orderCount:0,
				scrollTop: 0,
				account: "",
				bill_types: 1,
				userinfo: {
					'user_tel': '请登录',
					'referee': '请登录',
					'user_headimg': '/static/images/mall/my/mine_def_touxiang_3x.png',
				},
				title:'升级会员条件',
				description:'1.推荐5个用户，用户购买并确定收货。2.个人当月有消费记录，消费一笔就可拿一层奖励'
			}
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}
		},
		methods: {
			
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let result = this.tui.request('user', 'post', datas, 1000, 1, '', 'userInfo');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.userinfo = value.data;
						this.rsums=value.data.rsums*10;
						this.orderCount=value.data.orderCount*10;
						this.jointrader = value.data.jointrader;
						//写入缓存
					} else {
						// this.tui.toast(value.message);
					}
				})

			},
			toshare(){
				uni.navigateTo({
					url: '/pageschild/user/inviteCode'
				})
			},
			tohome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		
		},

		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {
			
		}
	}
</script>

<style>
	.upgrade {
		background: url(../../static/images/my/i10.90613b5a.png) 0 0/100% 100% no-repeat;
	}

	.upgradebg {
		background: url(../../static/images/my/i11.c4f65a7b.png) 100% no-repeat;
		background-size: 100%;
		width:100%;
	}

	.now {
		background: url(../../static/images/my/now.2fd06caf.png) 0 0/100% 100% no-repeat;
		background-size: 60%;
		padding-left: 20rpx;
		padding-top: 8rpx;
		color:#fff;
		width:200rpx;
		height: 40rpx;

	}

	.color-7A4A1E {
		color: #7a4a1e
	}
	.avator-box-face{
		position: relative;
	}
    .avator-box{
		position: fixed;
		width:100%;
		margin-top: 40rpx;
		justify-content: center;
		
	}
	.u-text{
		font-size: 24rpx;
	}
    .foot_fixed{
		margin-top: 30rpx;
	}
	.line {
		height: 14px;
		width: 5px;
		border-radius: 4px;
		background-color: #f1a727
	}
	.margin-top-20{
		margin-top: 20rpx;
	}
	.yui-share{
		display: flex;
		justify-content: center;
		text-align: center;
		margin:20rpx auto;
	}
    .u-h-380 {
        height: 190px!important;
    }
	.margin-top-10{
		margin-top: 10rpx;;
	}
	.margin-left-20{
		margin-left:20rpx ;
	}
	.share {
		padding:6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		background: linear-gradient(90deg, #ffecce, #f0c890);
		height: 40rpx;
		color: #8d561e;
	}
	.share-button{
		font-weight: bold;
		width:40%;
		text-align: center;
		font-size: 30rpx;
		border-radius: 60rpx;
		margin:0 20rpx;
		padding:20rpx
	}
	.w455r {
	    width: 227px;
	}
	
    .u-w-150 {
        width: 75px!important;
    }
	.flex-direction {
	    flex-direction: column!important;
	}
	.u-row-center {
	    justify-content: center;
		text-align: center;
		margin:0 auto;
	}
	.u-flex-col {
	    display: flex;
	    flex-direction: column;
	}
	.bl90_48 {
	    background: linear-gradient(180deg,#F3CFB0,#F8B173);
		border-radius: 20rpx;
		line-height: 40rpx;
        color:#fff;
		font-size: 24rpx;
		width:120rpx;
		left:10rpx;
		bottom:-4rpx;
		margin:0 auto;
		position: absolute;
		text-align: center;
	}
	.cl_FFF {
	    color: #fff!important;
	}
	.u-padding-25, .u-p-25 {
	    padding: 12px!important;
	}
	.u-font-24 {
	    font-size: 12px!important;
	}
	.color-8D561E {
		color: #8d561e
	}
	.color-7A4A1E{
	    color: #7a4a1e;
	}
    .radius28 {
        border-radius: 28px!important;
    }
	.margin-top-30 {
	    margin-top: 15px!important;
	}
	.fs-28 {
	    font-size: 14px;
	}
	.flex {
	    display: -webkit-box!important;
	    display: -moz-box!important;
	    display: -ms-flexbox!important;
	    display: -webkit-flex!important;
	    display: flex!important;
	}
	.justify-between {
	    justify-content: space-between!important;
		margin-top: 10rpx;
	}
	.padding-left-40 {
	    padding-left: 20px!important;
	}
	.fs-36 {
	    font-size: 18px;
	}
	.fs-26{
		font-size: 26rpx;
	}
	.fw-bold {
	    font-weight: 700;
	}
	.fs-24 {
	    font-size: 12px;
	}
	.-margin-left-12 {
	    margin-left: -6px!important;
	}
	.padding-top-20 {
	    padding-top: 10px!important;
	}
	.h320r {
	    height: 140px;
	}
    .u-image{
		width:150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.confrim {
		width: 125px;
		height: 31px;
		background: linear-gradient(180deg, #ffecce, #f0c890);
		opacity: 1;
		border-radius: 20px;
		color: #8d561e;
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 700
	}

	.cancel {
		width: 125px;
		height: 31px;
		border: 1px solid #8d561e;
		opacity: 1;
		border-radius: 20px;
		color: #8d561e;
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 700
	}
</style>
